<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <form action="">
    <input type="text" name="username"><br />
    <input type="password" name="pwd"><br />
    <input type="radio" name="sex" value="nan">
    <input type="radio" name="sex" value="nv"><br />

    <button>提交</button>
  </form>

  <script>
    // Form 表单
    // Data 数据
    // FormData 表单数据；这个对象的作用就是收集表单中的数据。还可以调用内置API对数据进行增删改操作

    // 语法： let fd = new FormData([form]); // form表示表单的DOM对象


    document.querySelector('form').onsubmit = function (e) {
      e.preventDefault();
      // 收集表单数据
      let fd = new FormData(this);   // $(this).serialize();

      // 追加数据
      fd.append('age', 20);
      fd.append('age', 30);

      // 修改数据
      fd.set('username', 'laotang');

      // console.log(fd.getAll('age'));

      // console.log(fd); // 直接打印对象，是看不到数据的
      // 必须通过forEach变量fd对象，才能看到这个对象中的数据
      fd.forEach((item, index) => {
        console.log(index, item);
      });
    }

  </script>
</body>

</html>